<!--
 * @Description: 订单tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: charles
 * @LastEditTime: 2021-12-21 10:27:43
-->
<template>
  <div class="order">
    <van-nav-bar title="我的工单" />
    <van-tabs @click="tabClickHandler" v-model="active" color="orange">
      <van-tab title="全部"></van-tab>
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <!-- 订单 -->
    <div class="order_list">
      <div class="order" v-for="o in workOrderData.list" :key="o.id">
        <div class="time">{{ o.create_time | datefmt }}</div>
        <van-row @click="toCompeleteOrderHandler(o)" class="vrow">
          <van-col span="6" style="text-align: center; font-size: 48px">
            <!-- <van-icon name="balance-list-o" /> -->
            <img
              v-if="o.status == '待接单'"
              src="../../assets/waitOrder.png"
              alt=""
            />
            <img
              v-else-if="o.status == '进行中'"
              src="../../assets/waitCompleteOrder.png"
              alt=""
            />
            <img v-else src="../../assets/completeOrder.png" alt="" />
          </van-col>
          <van-col span="18">
            <div><strong>类型：</strong>{{ o.type }}</div>
            <div><strong>状态：</strong>{{ o.status }}</div>
            <div><strong>设备：</strong>{{ o.device_name }}</div>
            <div><strong>工程：</strong>{{ o.engineer_name }}</div>
            <div>
              <strong>备注：</strong
              ><van-tag
                v-if="o.bill_why == null"
                color="#ffe1e1"
                text-color="#793d56"
                size="medium"
                >暂无备注</van-tag
              >
              <span v-else>{{ o.bill_why }}</span>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { get } from "../../utils/request";
export default {
  data() {
    return {
      active: 0,
      orders: [],
      status: null,
      params: {
        page: 1,
        pageSize: 100,
        status: "进行中",
      },
      workOrderData: { list: [] },
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  mounted() {
    this.loadWorkOrder();
  },
  methods: {
    // 完成工单
    toCompeleteOrderHandler(row) {
      this.$router.push({
        path: "/manager/complete",
        query: row,
      });
    },

    // 点击tab的时候执行的回调函数
    tabClickHandler(name, title) {
      // 修改当前data中status的值； 重新加载订单
      this.params.status = title === "全部" ? null : title;
      this.loadWorkOrder();
    },
    // 加载当前用户的工单信息
    loadWorkOrder() {
      let url = "/workorder/pageQuery";
      // 绑定当前用户
      this.params.account_id = this.info.id;
      get(url, this.params).then((resp) => {
        this.workOrderData = resp.data;
      });
    },
  },
  created() {
    this.loadWorkOrder();
  },
};
</script>
<style scoped>
* {
  font-family: "等线";
}

.time {
  font-size: 12px;
}

img {
  margin-top: 25%;
}

.vrow {
  font-size: 15px;
  padding-top: 2px;
  padding-bottom: 10px;
}

.vrow div {
  margin-top: 7px;
}
.order {
  font-size: 14px;
  color: #666;
  padding-bottom: 50px;
  background-color: #f4f4f4;
}
.order .order_list {
  padding: 0.5em;
}
.order .order_list > .order {
  background-color: #fff;
  margin-bottom: 0.5em;
  border-radius: 5px;
  padding: 0.5em;
}
.order .order_list > .order > .time {
  line-height: 2.4em;
  border-bottom: 1px solid #f4f4f4;
}
.order .order_list > .order > .btns {
  padding: 0.5em;
  text-align: right;
}
</style>